<template>
  <div>
    <el-form>
      <div style="margin: 16px;font-size:16px;">
        <div class="row">
          1.清点所携带工具(若是工具包或工具箱,则均含清单中所列工具)。
        </div>
        <div class="row">
          C1：
          <div style="display: flex;flex-wrap: wrap;margin-top:4px">
            <el-checkbox-group v-model="form.c1" :disabled="oneCheck">
              <el-checkbox label="1" style="margin-right: 12px;" shape="square">工具包</el-checkbox>
              <el-checkbox label="2" style="margin-right: 12px;" shape="square">对讲机</el-checkbox>
              <el-checkbox label="3" style="margin-right: 12px;" shape="square">手电筒</el-checkbox>
              <el-checkbox label="4" style="margin-right: 12px;" shape="square">指挥棒</el-checkbox>
              <el-checkbox label="5" style="margin-right: 12px;" shape="square">其他&nbsp;{{
                this.form.c1other }}</el-checkbox>
            </el-checkbox-group>

            <el-input v-model="form.jcc1other" v-show="form.jcc15" name="其他" placeholder="其他"
              :rules="[{ required: true, message: '请填写其他' }]" />
          </div>
        </div>
        <div class="row">
          C2：
          <div style="display: flex;flex-wrap: wrap;margin-top:4px">
            <el-checkbox-group v-model="form.c2" :disabled="oneCheck1">
              <el-checkbox label="1" style="margin-right: 12px;" shape="square">工具包</el-checkbox>
              <el-checkbox label="2" style="margin-right: 12px;" shape="square">对讲机</el-checkbox>
              <el-checkbox label="3" style="margin-right: 12px;" shape="square">手电筒</el-checkbox>
              <el-checkbox label="4" style="margin-right: 12px;" shape="square">指挥棒</el-checkbox>
              <el-checkbox label="5" style="margin-right: 12px;" shape="square">其他&nbsp;{{
                this.form.c2other }}</el-checkbox>
            </el-checkbox-group>
            <el-input v-model="form.jcc2other" v-show="form.jcc25" name="其他" placeholder="其他"
              :rules="[{ required: true, message: '请填写其他' }]" />
          </div>
        </div>

        <div v-if="index7">
          <div class="row">
            2.机位线确认。
          </div>
          <div class="row">
            C1：
            <div class="row">
              辨认地面机位线标识，确认机型为<span style="color: #088fea;"> {{ form.c5 ? form.c5 :
                '________' }} </span> 后放置轮档于停机线左侧。
            </div>
            <el-input v-model="form.c5" placeholder="请输入机型" />
          </div>

          <div class="row">
            C2：
            <div class="row">
              复核轮档放置位置为正确机型的停机线左侧。
              <el-checkbox-group v-model="form.c6">
                <el-checkbox label="1">是</el-checkbox>
                <el-checkbox label="2" style="margin-left:10px">否</el-checkbox>
              </el-checkbox-group>
            </div>
            <el-image style="width: 66px; height: 66px" :src="form.url" :zoom-rate="1.2"
              :preview-src-list="form.srcList" :initial-index="0" fit="cover" :preview-teleported="true">
              <div slot="error" class="image-slot">
                暂无图片
              </div>
            </el-image>
          </div>
        </div>



        <div class="row">
          3.对机位适用性检查
        </div>
        <el-checkbox-group v-model="form.d1">
          <el-checkbox label="1" style="margin-right: 12px;" shape="square">滑行线路及机位周围无障碍物,地面整洁无杂物。</el-checkbox>
          <el-checkbox label="2" style="margin-right: 12px;" shape="square">轮挡及警示锥完好。</el-checkbox>
          <el-checkbox label="4" style="margin-right: 12px;" shape="square">灭火设备正常。</el-checkbox>
          <el-checkbox label="5" style="margin-right: 12px;" shape="square">廊桥在回归点。</el-checkbox>
          <el-checkbox label="3" style="margin-right: 12px;" shape="square">设备摆放区内牵引杆、工作梯及櫲胶轮挡等摆放整齐。</el-checkbox>
        </el-checkbox-group>

        <div class="row">
          4.离开时清点工具与第1条所携带的工具一致。
        </div>
        <el-checkbox-group v-model="form.d3">
          <el-checkbox label="1" style="margin-right: 12px;" shape="square">是</el-checkbox>
          <el-checkbox label="2" style="margin-right: 12px;" shape="square">否</el-checkbox>
        </el-checkbox-group>
        <div class="row">
          C1：
          <div style="display: flex;flex-wrap: wrap;margin-top:4px">
            <el-checkbox-group v-model="form.c3" :disabled="oneCheck2">
              <el-checkbox label="1" style="margin-right: 12px;" shape="square">一致</el-checkbox>
              <el-checkbox label="2" style="margin-right: 12px;" shape="square">不一致&nbsp;{{
                this.form.c3other }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="row">
          C2：
          <div style="display: flex;flex-wrap: wrap;margin-top:4px">
            <el-checkbox-group v-model="form.c4" :disabled="oneCheck3">
              <el-checkbox label="1" style="margin-right: 12px;" shape="square">一致</el-checkbox>
              <el-checkbox label="2" style="margin-right: 12px;" shape="square">不一致&nbsp;{{
                this.form.c4other }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div style="padding: 20px;">
        <div class="row">
          工作者：
          <el-input v-model="form.n1" name="n1" disabled placeholder="请输入工作者" />
        </div>
        <div class="row" v-if="routeParam.source === 'edit'">
          审核者：
          <el-input v-model="form.n2" name="n2" disabled placeholder="-" />
        </div>
      </div>
   
    </el-form>
    <div style="padding: 20px;">
      <el-button block type="primary" @click="onSubmit">
        提交
      </el-button>
    </div>
  </div>
</template>
<script>
import UploadFile from "../../components/Upload/UploadFile.vue";
import { edit, toExamine, queryById } from "@/api/airport/outfield";
import { oauthUser, queryString, getLoginInfo } from "@/api/wcLogin";

export default {
  components: { UploadFile },
  computed: {
    c1Show () {
      return this.form.c1.indexOf('5') !== -1
    },
    c2Show () {
      return this.form.c2.indexOf('5') !== -1
    },
    c3Show () {
      return this.form.c3.indexOf('0') !== -1
    },
    c4Show () {
      return this.form.c4.indexOf('0') !== -1
    },
    bolEdit () {
      return this.status !== 1 && this.status !== 2
    },
    rule1 () {
      if (this.routeParam.source === 'edit') {
        return [{ required: true, message: '请上传' }]
      } else {
        return []
      }
    },
  },
  watch: {
    'form.c1': {
      immediate: true,
      handler (val) {
        const len1 = this.form.c1.length, len2 = this.form.c2.length;
        if (this.bolTow) {
          if (len2) {
            this.oneCheck1 = true;
          }
        } else {
          if (len1 === 0) {
            this.oneCheck1 = false;
          }
          if (len1) {
            this.oneCheck1 = true;
          }
        }

      },
    },
    'form.c2': {
      immediate: true,
      handler (val) {
        const len1 = this.form.c1.length, len2 = this.form.c2.length;
        if (this.bolTow) {
          if (len1) {
            this.oneCheck = true;
          }

        } else {
          if (len2 === 0) {
            this.oneCheck = false;
          }
          if (len2) {
            this.oneCheck = true;
          }
        }
      },
    },

    'form.c3': {
      immediate: true,
      handler (val) {
        const len1 = this.form.c3.length, len2 = this.form.c4.length;
        if (this.bolTow1) {
          if (len2) {
            this.oneCheck3 = true;
          }
        } else {
          if (len1 === 0) {
            this.oneCheck3 = false;
          }
          if (len1) {
            this.oneCheck3 = true;
          }
        }

      },
    },
    'form.c4': {
      immediate: true,
      handler (val) {
        const len1 = this.form.c3.length, len2 = this.form.c4.length;
        if (this.bolTow1) {
          if (len1) {
            this.oneCheck2 = true;
          }

        } else {
          if (len2 === 0) {
            this.oneCheck2 = false;
          }
          if (len2) {
            this.oneCheck2 = true;
          }
        }
      },

    },
  },
  data () {
    return {
      // 表单参数
      form: {
        boatNameInspect: '',

        d1: [],
        d2: '',
        d3: [],

        c1: [],
        c1other: '',

        c2: [],
        c2other: '',

        c3: [],
        c3other: '',

        c4: [],
        c4other: '',

        n1: '',
        n2: '',

        c6: [],
        c5: '',

        c7: [],

      },
      routeParam: {},
      wxUser: undefined,
      status: '',
      oneCheck: false,
      oneCheck1: false,
      oneCheck2: false,
      oneCheck3: false,
      bolTow: false,
      bolTow1: false,

      index7: true,


    };
  },
  created () {
    this.routeParam = this.$route.query;
    queryById({ id: this.$route.query.id }).then(res => {
      this.bolTow = false;
      const workerInspectTerm = res.data?.inspectTimestamp ? res.data.inspectTimestamp : 0;
      const reviewerInspectTerm = res.data?.reviewerTimestamp ? res.data.reviewerTimestamp : 0;
      this.status = res.data?.state ? res.data?.state : 0;
      this.updateBy = res.data?.updateBy;
      let item = {};
      if (workerInspectTerm > reviewerInspectTerm) {
        item = res.data.workerInspectTerm;
      } else {
        item = res.data.reviewerInspectTerm;
      }
      if (item) {
        const l1 = item[1].content.c1.length, l2 = item[1].content.c2.length;
        const l3 = item[5].content.c3.length, l4 = item[5].content.c4.length;
        if (l1 !== 0 || l2 !== 0) {
          this.bolTow = true;
        }
        if (l3 !== 0 || l4 !== 0) {
          this.bolTow1 = true;
        }
        let index = {};
        item.forEach(item => {
          for (let i in item.content) {
            this.form[i] = item.content[i];
          }
          index[item.index] = item.index;
        });
        if (index['7']) {
          this.index7 = true
        } else {
          this.index7 = false
        }

      }
      if (this.routeParam.source === 'edit') {
        this.form.n1 = res.data.worker;
      }
      const user = JSON.parse(sessionStorage.getItem('userInfo'))
      this.wxUser = user;
      if (this.routeParam.source === 'edit') {
        this.form.n2 = user.nickName;
      } else {
        this.form.n1 = user.nickName;
      }
      // this.form.n1 = res.data.worker;
      // this.form.n2 = res.data.reviewer;
    })
  },
  methods: {
   

    checkBoxOne (a) {
      if (a.length === 2) {
        a.shift();
      }
    },
    otherC1 (val) {
      this.form.c1other = ''
    },
    otherC2 (val) {
      this.form.c2other = ''
    },
    onSubmit (values) {
      const inspect = [];
      inspect.push({
        index: 1,
        content: { boatNameInspect: this.form.boatNameInspect },
      })

      inspect.push({
        index: 2,
        content: {
          c1: this.form.c1,
          c1other: this.form.c1other,

          c2: this.form.c2,
          c2other: this.form.c2other,
        },
      })

      inspect.push({
        index: 3,
        content: {
          d1: this.form.d1,
        },
      })

      inspect.push({
        index: 4,
        content: {
          d2: this.form.d2,
        },
      })


      inspect.push({
        index: 5,
        content: {
          d3: this.form.d3,
        },
      })

      inspect.push({
        index: 6,
        content: {
          c3: this.form.c3,
          c3other: this.form.c3other,

          c4: this.form.c4,
          c4other: this.form.c4other,
        },
      })


      inspect.push({
        index: 7,
        content: {
          c5: this.form.c5,

          c6: this.form.c6,

          c7: this.form.c7,
        },
      })


      const data = {
        inspectDTOS: inspect,
        id: this.$route.query.id,
        name: this.form.n1,
      }

      if (this.$route.query.source === 'add') {
        edit(data).then((res) => {
          this.$message.success("成功");
          this.$router.push({ name: 'Menu', replace: true })
        });
      } else if (this.$route.query.source === 'edit') {
        toExamine(data).then((res) => {
          this.$message.success("成功");
          this.$router.push({ name: 'Menu', replace: true })
        });
      }

    },
  },
};
</script>


<style lang='scss' scoped>
.d11 {
  :deep(.van-checkbox) {
    margin-bottom: 0.16rem;
  }
}

.row {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  overflow: hidden;
  color: var(--van-cell-font-size);
  font-size: var(--van-cell-font-size);

  &:after {
    position: absolute;
    box-sizing: border-box;
    content: "";
    right: var(--van-padding-md);
    bottom: 0;
    left: var(--van-padding-md);
    pointer-events: none;
    border-bottom: 1px solid var(--van-cell-border-color);
    transform: scaleY(0.5);
  }
}

.head {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
}

.bottom {
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
}

.mt46 {
  padding-bottom: 56px;
}
</style>